<template>
  <div>
    <el-breadcrumb separator="/" style="margin-top: 20px">
      <el-breadcrumb-item :to="{ path: '/manager/order/tackOut' }"
        >首页</el-breadcrumb-item
      >
      <el-breadcrumb-item :to="{ path: 'manager/person/view' }"
        >查看个人信息</el-breadcrumb-item
      >
    </el-breadcrumb>

    <el-descriptions title="个人信息" class="des" size="large" :column="3">
      <el-descriptions-item label="用户名">{{ userInfo.username }}</el-descriptions-item>
      <el-descriptions-item label="账号名称">{{ userInfo.account }}</el-descriptions-item>
      <el-descriptions-item label="头像">
        <el-image
          style="width: 50px; height: 50px; border-radius: 50%"
          :src="userInfo.img"
          fit="cover"
        />
      </el-descriptions-item>
      <el-descriptions-item label="性别">
        <el-tag>{{ userInfo.sex }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="金额">
        <el-tag size="big" type="warning">{{ userInfo.money }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="地址">{{ userInfo.address }}</el-descriptions-item>
      <el-descriptions-item label="电话">{{ userInfo.phone }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{
        userInfo.inputTime
      }}</el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script lang="ts" setup>
import axios from "axios";
import Vue, { reactive, ref } from "vue";

const userInfo = reactive({
  username: "",
  account: "",
  phone: "",
  sex: "",
  img: "",
  address: "",
  inputTime: "",
  money: "",
});
const token = localStorage.getItem("student_auth_token");
const getUserInfo = () => {
  axios
    .get("/api/auth/userinfo", {
      headers: {
        token: token,
      },
    })
    .then((res) => {
      // console.log("code line-47 \n\r😔 res:\n\r", res);
      if (res.data.success) {
        const msg = res.data.message;
        userInfo.username = msg.username;
        userInfo.account = msg.name;
        userInfo.sex = msg.sex ? msg.sex : "未知";
        userInfo.img = msg.img
          ? msg.img
          : "https://img1.baidu.com/it/u=333016990,977824001&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500";
        userInfo.address = msg.address ? msg.address : "未知地区";
        userInfo.phone = msg.phone ? msg.phone : "未知号码";
        userInfo.inputTime = msg.inputTime;
        userInfo.money = msg.money;
      }
    })
    .catch((err) => {
      // console.log("code line-51 \n\r😆 err:\n\r", err);
    });
};
getUserInfo();
setInterval(getUserInfo, 10000);
</script>

<style lang="scss" scoped>
.des {
  margin-top: 40px;
}
</style>
